<template>
  <div>
    <h1>1、动态组件的使用</h1>
    <div>
      <button @click="comName='userName'">账号密码的填写</button>
      <button @click="comName='userInfo'">个人信息的填写</button>
    </div>
    <div>
      <p>下面显示注册组件：</p>
      <!-- <userName></userName> -->
      <!-- 动态组件实现 组件的显示
        动态组件：同一个挂载点，可以动态切换显示组件
          挂载点：指的是用同一个占位符，可以显示不同的内容。
        vue内置了一个挂载点：就是component组件结合is属性进行动态显示组件

        总结：通过动态组件切换显示不同的组件会不断的创建和销毁组件，导致性能不高。
       -->
      <!-- <component :is="comName"></component> -->
      <!-- 
        需要：因为我们的页面内容比较，因此切换显示组件的时候我们不希望销毁组件，此刻怎么办？
        答：vue专门提供了一个缓存组件用于缓存被切换的组件，
        这个缓存组件就叫：keep-alive组件
        怎么使用这个组件呢？答：只需要用这个组件将需要切换的组件包裹起来即可，
        代码如下
       -->
       <keep-alive>
          <component :is="comName"></component>
       </keep-alive>
       <!-- 
         总结：keep-alive作用就是用于缓存组件
        -->
    </div>
  </div>
</template>

<script>
import userName from "./components/userName.vue"
import userInfo from "./components/userInfo.vue"
export default {
  components: {
    userName,userInfo
  },
  data(){
    return {
      comName: "userName"
    }
  }
}
</script>

<style>

</style>